<template>
  <div class="goods-container">
   <!-- 悬浮导航 -->
    <nav-ball v-model="isShow">
      <nav-ball-item
        title="购物车"
        @click.native="$router.push('/shop')"
      ></nav-ball-item>
      <nav-ball-item
        title="申请开店"
        @click.native="$router.push('/applyOpenStore')"
      ></nav-ball-item>
      <nav-ball-item
        title="推广赚钱"
        @click.native="$router.push('/promotion')"
        ></nav-ball-item>
      <nav-ball-item
        title="我的推广"
        @click.native="$router.push('/myPromotion')"
        ></nav-ball-item>
      <nav-ball-item
        title="帮助中心"
        @click.native="$router.push('/help')"
        ></nav-ball-item>
    </nav-ball>
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar van-hairline--bottom"
      left-text="小狐首页"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <!-- 输入框 -->
    <van-search
      v-model="value"
      shape="round"
      background="#fff"
      placeholder="搜索您想要的商品"
      @click="getSpeciesList"
    />
    <!-- /输入框 -->

    <!-- 分类选择器 -->
    <van-tree-select height="84.6vh" :items="goodsSpeciesList" :main-active-index.sync="active">
      <template #content>
        <div class="select-wrap" v-for="(item,index) in goodsSpeciesList" :key="index">
          <goods-list :speciesId="item.speciesId" v-if="active === index" />
        </div>
        <!-- <goods-list v-if="active === 0"></goods-list>
        <goods-list v-if="active === 1"></goods-list>
        <goods-list v-if="active === 2"></goods-list>-->
      </template>
    </van-tree-select>
    <!-- /分类选择器 -->
  </div>
</template>

<script>
import GoodsList from './components/goods-list'
import request from '@/utils/request'
// import '@/mock/goods.js'
// import requestH from '@/utils/requestH'
import { navBallItem, navBall } from '@/utils/navBall'

export default {
  name: 'Goods',
  components: {
    GoodsList,
    navBallItem,
    navBall
  },
  props: {},
  data () {
    return {
      isShow: false,
      active: 0, // 分类选择器的激活索引
      goodsSpeciesList: [], // 分类选择器的选择项列表
      value: '', // 输入框
      goodsList: [] //商品列表
    }
  },
  created () {
    this.getSpeciesList()
  },
  mounted () {
  },
  watch: {},
  computed: {},
  methods: {
    async getSpeciesList () {
      try {
        const { data } = await request({
          method: 'GET',
          url: '/goodsSpecies'
        })
        this.goodsSpeciesList = data.goodsSpecies
      } catch (error) {
        this.$toast.fail('获取商品种类失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.goods-container {
  /* 导航栏 */
  /deep/.page-nav-bar {
    background-color: #fff;
    .van-nav-bar__text {
      color: #2c2c2c;
    }
    .van-icon {
      color: #2c2c2c;
    }
  }
  /* /导航栏 */

  /* 分类选择器 */
  /deep/.van-tree-select {
    .van-sidebar {
      background-color: #f0f3f5;
    }
  }
  /* /分类选择器 */
}
</style>
